<template>
  <div class="v-image">
    <img
      :src="config.imgurl"
      :style="imgStyle"
      :class="config.rotate ? 'animation' : ''"
      alt=""
    />
  </div>
</template>

<script>
import CommonMixin from "../mixins/commonMixin";
export default {
  name: "v-image",
  mixins: [CommonMixin],
  computed: {
    imgStyle() {
      let animationObj = {
        "animation-iteration-count": "infinite",
        "animation-timing-function": "cubic-bezier(0, 0, 1, 1)",
        opacity: this.config.opacity,
      };
      if (this.config.rotate) {
        animationObj["animation-duration"] = `${this.config.speed}s`;
      }
      return animationObj;
    },
  },
};
</script>

<style scoped>
.v-image {
  width: 100%;
  height: 100%;
}
.v-image .animation {
  animation-name: rte;
}
@keyframes rte {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
